<template>
  <div class="cms-views-container bg-[#f6f6f6] more-video-pages">
    <CmsVideoHeader :title="type === 1 ? '更多' : '资料'" />
    <!-- 选项卡 -->
    <TabCardView
      :type="1"
      @click="handleClick('tabsList')"
      :class="{ 'component-selected': select === 'tabsList' }"
      v-if="type === 2"
    />
    <CmsGridView
      :type="3"
      showTitle
      moreShow
      title="1"
      @click="handleClick(type === 1 ? 'videoList' : 'participatingWorks')"
      :class="{ 'component-selected': select === 'videoList' || 'participatingWorks' }"
    />
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import type { ComponentKeys } from '@cms/h5-editor'
import CmsComponents from '@cms/components'
const { TabCardView, CmsVideoHeader, CmsGridView } = CmsComponents

withDefaults(defineProps<{ type: number; select?: ComponentKeys | undefined }>(), { type: 1 })

const emit = defineEmits<{
  (event: 'select', key: ComponentKeys): void
}>()

const handleClick = (key: ComponentKeys) => {
  emit('select', key)
}
</script>

<style scoped lang="less">
.more-video-pages {
  .free,
  .vip,
  .gold {
    border-radius: 0 4px 0 4px;
  }
  .free {
    background-image: linear-gradient(135deg, #ffa45d 0%, #ff613f 100%);
  }
  .vip,
  .gold {
    background-image: linear-gradient(135deg, #eed78e 0%, #cbae6c 100%);
  }
}
</style>
